<!DOCTYPE html>
<html>
<head>
  <title>省市区选择</title>
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <!-- head 中 -->
  <link rel="stylesheet" th:href="@{/jquery-weui/lib/weui.css}">
  <link rel="stylesheet" th:href="@{/jquery-weui/css/jquery-weui.css}">
  <link rel="stylesheet" th:href="@{/jquery-weui/css/demos.css?t=12}">
  <link rel="stylesheet" th:href="@{/css/h5style.css}">
  <style>
    .container{
      font-family: 微软雅黑;
      width: 100%;
      height: 500px;
    }
    ul{
      list-style: none;
      width: 100%;
      padding:0;
      margin:0;
      height: 42px;
      overflow: hidden;
    }
    ul li{
      float: left;
      list-style: none;
      padding:0;
      margin:0;
      height: 40px;
      line-height: 40px;
      white-space: nowrap;
      color: #222222;
      min-width: 80px;
      text-align: center;
    }
    .tab-on{
      color: #f23030;
      border-bottom: 2px solid #f23030;
    }
    .container .prov-div{
      width: 50%;
      float: left;
      height: 405px;
      overflow: scroll;
    }
    .prov-div div{
      height: 40px;
      border-bottom: 1px solid #efefef;
      margin: 0 auto;
      padding-left: 10px;
      line-height: 40px;
    }
    .container .city-div{
      width: 50%;
      float: left;
      height: 405px;
      background-color: #f3f3f3;
      overflow: scroll;
    }
    .city-div div{
      height: 40px;
      border-bottom: 1px solid #efefef;
      margin: 0 auto;
      padding-left: 10px;
      line-height: 40px;
    }
    .container .county-div{
      width: 50%;
      float: left;
      height: 405px;
      overflow: scroll;
    }
    .county-div div{
      height: 40px;
      border-bottom: 1px solid #efefef;
      margin: 0 auto;
      padding-left: 10px;
      line-height: 40px;
    }
    .font-1{
      color: #f23030;
    }
    .qr{
      background-color: #cd3244;
      text-align: center;
      color: white;
      width: 70%;
      border-radius: 12px;
      margin: 0 auto;
      height: 35px;
      line-height: 35px;
    }
    .img-span{
      float: right;
      margin-right: 10px;
    }
    /* 修改标题的文字大小 */
    .weui-dialog__title {
      font-size: 24px;
    }
    .weui-dialog__bd {
      font-size: 20px;
    }
    /* 修改按钮的文字大小和内边距 */
    .weui-dialog__btn {
      font-size: 20px;
      padding: 10px 20px;
    }
  </style>
</head>

<body style="background-color: white;margin: 0px;">
<input id="prov_id" name="prov_id" value="" type="hidden">
<input id="city_id" name="city_id" value="" type="hidden">
<input id="county_id" name="county_id" value="" type="hidden">
<div class="container">
  <table style="width: 100%;height: 50px;">
    <tr>
      <td style="width: 10px;"></td>
      <td>
        <table style="width: 100%;">
          <tr>
            <td style="text-align: left">城市地区</td>
            <td style="text-align: right"><img width="16px;" src="/stamp/image/ico/guanbi.png" onclick="close_layer();"></td>
          </tr>
        </table>

      </td>
      <td style="width: 10px;"></td>
    </tr>
  </table>
  <div style="height: 1px;background-color: #f3f3f3;width: 100%"></div>
  <div style="height: 50px;width: 100%;">
    <ul>
      <li class="tab-on" id="prov_li" onclick="show_div('prov_li')">
      </li>
      <li id="city_li" onclick="show_div('city_li')">
      </li>
      <li id="county_li" onclick="show_div('county_li')">
      </li>
    </ul>
  </div>
  <div class="prov-div" id="sheng">
  </div>
  <div class="city-div" id="shi">
  </div>
  <div class="county-div" style="display: none;" id="qu">

  </div>

</div>
<div style="width: 100%;text-align: center;height: 45px;">
  <div style="height: 10px;"></div>
  <div class="qr" onclick="set_area();">确认</div>
</div>
</body>
<!-- body 最后 -->
<script type="text/javascript" th:src="@{/jquery-weui/lib/jquery-2.1.4.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/jquery-weui/lib/fastclick.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/jquery-weui/js/jquery-weui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/jsfiles/crypto-js.min.js?t=1}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/jsfiles/com.js?t=12}" charset="utf-8"></script>
<script th:src="@{/jquery-weui/js/city-picker.min.js}"></script>
<script th:src="@{/layer/mobile/layer.js}" charset="utf-8"></script>
<script>
  $(function() {
    FastClick.attach(document.body);
  });
  var adminUrl = "[[${adminUrl}]]";
  //后端地址
  var url = "[[${serverUrl}]]/stamp/h5/api/";
  var prov = "[[${prov}]]";
  var city = "[[${city}]]";
  var county = "[[${county}]]";
  var dz = window.location.href;
  dz = dz.replace(/&/g, "$");
  function init_data(){
    $.showLoading("数据加载中...");
    var jsonData = {
      prov:prov,
      city:city,
      county:county,
      timestamp:new Date().getTime()
    };
    var sendStr = {
      data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a_h5"),localStorage.getItem("b_h5"))
    };
    $.ajax({
      type:"post",
      url:url+"addr_area",
      data:JSON.stringify(sendStr),
      dataType:"json",
      timeout : 10*1000, //超时时间设置，单位毫秒
      crossDomain: true,
      contentType: 'application/json;charset=UTF-8',
      headers: {
        "token": localStorage.getItem("token_h5")
      },
      beforeSend: function(request) {
        request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
      },
      success:function(result){
        if (result.code==0) {
          let rtn = decrypt_str(result.data, localStorage.getItem("a_h5"), localStorage.getItem("b_h5"));
          console.info("rtn:"+rtn);
          let d = JSON.parse(rtn);
          $("#prov_id").val(d.prov);
          $("#city_id").val(d.city);
          $("#county_id").val(d.county);
          if (!is_null(d.prov_name)){
            $("#prov_li").html(d.prov_name);
          }else{
            $("#prov_li").html("未选择")
          }
          if (!is_null(d.city_name)){
            $("#city_li").html(d.city_name);
          }else{
            $("#city_li").html("未选择")
          }
          if (!is_null(d.county_name)){
            $("#county_li").html(d.county_name);
          }else{
            $("#county_li").html("未选择")
          }
          var str="";
          d.tWxProvinceL.forEach(function(item){
            if (item.lsh==prov){
              str+="<div id=\"div_p_"+item.lsh+"\" onclick=\"set_prov('"+item.lsh+"','"+item.name+"','"+item.provinceId+"');\">"+item.name+"<span class=\"img-span\"><img src=\"/stamp/image/ico/tick.png\" width=\"16px\"></span></div>";
            }else{
              str+="<div id=\"div_p_"+item.lsh+"\" onclick=\"set_prov('"+item.lsh+"','"+item.name+"','"+item.provinceId+"');\">"+item.name+"</div>";
            }
          });
          $("#sheng").html(str);
          //省点击
          $("#div_p_"+d.prov).click();
        }
      },
      error:function(result){
        $.hideLoading();
      },complete:function(){
        $.hideLoading();
      }
    });
  }

  init_data();

  var c = "<span class=\"img-span\"><img src=\"/stamp/image/ico/tick.png\" width=\"16px\"></span>";
  /*关闭*/
  function close_layer()
  {
    set_area();
  }
  /*切换*/
  function show_div(id)
  {
    $(".tab-on").removeClass("tab-on");
    $("#"+id).addClass("tab-on");   //tab样式改变
    if (id=="prov_li"){
      $(".prov-div").show();
      $(".city-div").show();
      $(".county-div").hide();
    }else if (id=="city_li"){
      $(".prov-div").hide();
      $(".city-div").show();
      $(".county-div").show();
    } else if (id=="county_li"){
      $(".prov-div").hide();
      $(".city-div").show();
      $(".county-div").show();
    }

  }
  /*省份选择*/
  function set_prov(lsh,name,id){
    var old_lsh = $("#prov_id").val();
    //设置省份名称
    $("#prov_id").val(lsh);
    $("#prov_li").html(name);

    //如果省份改变，需要清空城市和县区
    if (old_lsh != lsh)
    {
      $("#city_id").val("");
      $("#city_li").html("未选择");

      $("#county_id").val("");
      $("#county_li").html("未选择");
    }

    //设置div文字变红
    $("div[id^='div_p_']").removeClass("font-1");
    $("div[id^='div_p_'] span").remove();
    $("#div_p_"+lsh).addClass("font-1");
    $("#div_p_"+lsh).append(c);



    //保证显示省、市
    /*$(".tab-on").removeClass("tab-on");
    $("#city_li").addClass("tab-on");*/
    $(".prov-div").show();
    $(".city-div").show();
    $(".county-div").hide();

    //填充市
    $.ajax({
      url: url+"getcity",
      type: 'POST',
      data:"city_id="+$("#city_id").val()+"&province_id="+id+"&token="+localStorage.getItem("token_h5")+"",
      timeout: 60000,
      error: function(XMLHttpRequest, textStatus, errorThrown)
      {
        $(".city-div").html("");
      },
      success: function(htmlStr)
      {
        $(".city-div").html(htmlStr.split("|")[1]);
        var z = city;
        if (z!="")
        {
          $("#div_c_"+z).click();
        }
      }
    });

  }
  /*城市选择*/
  function set_city(lsh,name,id){
    var old_lsh = $("#city_id").val();
    //设置城市名称
    $("#city_id").val(lsh);
    $("#city_li").html(name);

    //如果城市，需要清空县区
    if (old_lsh != lsh)
    {
      $("#county_id").val("");
      $("#county_li").html("未选择");
    }

    //设置div文字变红
    $("div[id^='div_c_']").removeClass("font-1");
    $("div[id^='div_c_'] span").remove();
    $("#div_c_"+lsh).addClass("font-1");
    $("#div_c_"+lsh).append(c);

    //隐藏省份，显示城市，显示县区
    $(".tab-on").removeClass("tab-on");
    $("#city_li").addClass("tab-on");
    $(".prov-div").hide();
    $(".city-div").show();
    $(".county-div").show();

    //填充县区
    $.ajax({
      url: url+"getcounty",
      type: 'POST',
      data:"county_id="+$("#county_id").val()+"&city_id="+id+"&token="+localStorage.getItem("token_h5")+"",
      timeout: 60000,
      error: function(XMLHttpRequest, textStatus, errorThrown)
      {
        $(".county-div").html("");
      },
      success: function(htmlStr)
      {
        $(".county-div").html(htmlStr.split("|")[1]);
        var z = county;
        if (z!="")
        {
          $("#div_county_"+z).click();
        }
      }
    });

  }
  /*县区选择*/
  function set_county(lsh,name,id){
    //设置城市名称
    $("#county_id").val(lsh);
    $("#county_li").html(name);

    //设置div文字变红
    $("div[id^='div_county_']").removeClass("font-1");
    $("div[id^='div_county_'] span").remove();
    $("#div_county_"+lsh).addClass("font-1");
    $("#div_county_"+lsh).append(c);

    //隐藏省份，显示城市，显示县区
    $(".tab-on").removeClass("tab-on");
    $("#county_li").addClass("tab-on");
    $(".prov-div").hide();
    $(".city-div").show();
    $(".county-div").show();
  }
  /*设置省市区*/
  function set_area()
  {
    var str = $("#prov_li").html() +" "+$("#city_li").html()+" " +$("#county_li").html();
    parent.set_area($("#prov_id").val(),$("#city_id").val(),$("#county_id").val(),str);
  }

</script>

</body>
</html>
